<template>
  <div> 
    <HeaderNav :title="title" :showBack='true' />
    <div class="contact_list" v-if="list.length > 0" >
	      <router-link class="contact_item" v-for="(item,index) in list" :key="index" :to="`/userInfo?type=2&id=${item.id}`">
	        <img :src="item.httpAvatar" class="contact_portrait" />
	        <div class="contact_message">
	          <span class="contact_name"><span class="contact_isOnline" :style="`color: ${item.isOnLine ? 'rgb(6, 138, 87)' : '#a1a1a1'} `">● </span>{{item.name}}</span>
	          <div class="contact_age">{{item.age}}{{$t('m.msg.AGE')}}</div>
	        </div>
	        <van-icon name="chat" size="40px" color="#00a0e9" class="contact_chat" />
	        <van-icon name="gift" size="40px" color="#00a0e9" class="contact_gift" />
	      </router-link>
	   </div>
     <div v-else>
       <img src="../../assets/img/nonedata.png" class="nonedata"/>
     </div>
  </div>
</template>

<script>
	import {
    Icon
  } from 'vant';
import HeaderNav from '@/components/HeaderNav.vue'
import {postQuery, getQuery} from '@/api/query';
export default {
  name: 'visitList',
  components: {
    [Icon.name]: Icon,
    HeaderNav
  },
  data(){
    return {
    	list:[],
      title: ''
    }
  },
  methods: {
    //互相喜欢列表
    loadLikeCommonData(){
      let that = this;
      getQuery('/member/get/like/common')
        .then (res => {
          if(res.code == 200){
            console.log(res)
            that.list = res.data
          }else{
            that.$toast.fail(res.msg);
          }
      })
    },
    //喜欢我的列表
    loadLikeIData(){
      let that = this;
      getQuery('/member/get/like/mi')
        .then (res => {
          if(res.code == 200){
            console.log(res)
            that.list = res.data
          }else{
            that.$toast.fail(res.msg);
          }
      })
    },
    //我喜欢的列表
    loadLikeData(){
      let that = this;
      getQuery('/member/get/like')
        .then (res => {
          if(res.code == 200){
            console.log(res)
            that.list = res.data
          }else{
            that.$toast.fail(res.msg);
          }
      })
    }
    
  },
  mounted: function() {
  	var that = this;
  	console.log(this.$route.query.type)
  	let type = that.$route.query.type;
  	if(type == 1){
      that.title = that.$i18n.t('m.headernav.VISITLIST1')
      that.loadLikeCommonData();
  	}else if(type == 2){
      that.title = that.$i18n.t('m.headernav.VISITLIST2')
      that.loadLikeIData();
  	}else if(type == 3){
      that.title = that.$i18n.t('m.headernav.VISITLIST3')
      that.loadLikeData();
  	}
   
  },
  created(){

  }
}
</script>
<style scoped>
  .contact_item {
    width: 100%;
    height: 150px;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: black;
  }

  .contact_portrait {
    width: 100px;
    height: 100px;
    margin: 0px 20px;
  }

  .contact_message {
    width: 430px;
    height: 100px;
    line-height: 50px;
  }

  .contact_age{
    font-size: 24px;
    color:#a1a1a1;
  }

  .contact_isOnline {
    font-weight: bold;

  }

  .contact_name {
    font-weight: bold;
    font-size: 28px;
  }

  .contact_chat {
    margin-left: auto;
  }

  .contact_gift {
    margin-right: 20px;
  }

</style>
